<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>申请代言</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link rel="stylesheet" type="text/css" href="__ROOT__/public/webapp/css/s_base.css" />
		<link rel="stylesheet" type="text/css" href="__ROOT__/public/webapp/css/mall.css" />
		<link rel="stylesheet" type="text/css" href="__ROOT__/public/webapp/css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="__ROOT__/public/webapp/css/s_valide.css" />
		<link rel="stylesheet" type="text/css" href="__ROOT__/public/webapp/css/iconfont/iconfont.css" />
		<style type="text/css">
			    .alertMsg{
	opacity: 0;
	position: fixed;
	z-index: -1;
	width: 100%;
	bottom: 10%;left: 0;
	text-align: center;
	transition: opacity 0.5s;
}
.alertMsg.on{
	opacity: 1;
	z-index: 999;
}
.alertMsg span{
	padding: 0.15rem 0.25rem;
	border-radius: 0.5em;
	background-color: rgba(0,0,0,0.4);
	color: #fff;
	font-size: 0.18rem;
}
		</style>
	</head>

	<body style="background: #fff;">
		<img src="__ROOT__/public/webapp/img/main_img@2x.png" class="showimg" />
		<!--表单-->
		<form action="" method="post" style="margin-top: 20px;" id="daiyan">
			<!--<div class="form_cell clearfix">
				<div class="left">
					<i class="iconfont icon-dizhi"></i>
					<span class="theme_text">收货地址</span>
				</div>
				<div class="input_wrap">
					<div class="border"></div>
					<input type="text" name="" id="" value="" placeholder="请输入收货地址" />
				</div>
			</div>
			<div class="form_cell clearfix">
				<div class="left">
					<i class="iconfont icon-dianhua"></i>
					<span class="theme_text">收货电话</span>
				</div>
				<div class="input_wrap">
					<div class="border"></div>
					<input type="number" name="" id="" value="" placeholder="请输入收货电话" />
				</div>
			</div>-->
			<div class="form_cell clearfix">
				<div class="left">
					<i class="iconfont icon-shoukuan-copy"></i>
					<span class="theme_text">收款账号</span>
				</div>
				<div class="input_wrap">
					<div class="border"></div>
					<input type="number" name="shoukuan" id="" value="" placeholder="请输入收款账号" datatype="n6-20" nullmsg="请输入收款账号!"/>
				</div>
			</div>
			<div class="form_cell clearfix">
				<div class="left">
					<i class="iconfont icon-cf-c28"></i>
					<span class="theme_text">所属银行</span>
				</div>
				<div class="input_wrap">
					<div class="border"></div>
					<select name="yinhang" class="bank" datatype="*" nullmsg="请选择所属银行!">
						<option value="">请选择</option>
						<option value="工商银行">工商银行</option>
						<option value="农业银行">农业银行</option>
						<option value="建设银行">建设银行</option>
						<option value="中国银行">中国银行</option>
						<option value="交通银行">交通银行</option>
						<option value="招商银行">招商银行</option>
					</select>
				</div>
			</div>
			<div class="form_cell clearfix">
				<div class="left">
					<i class="iconfont icon-zhanghaoguanli"></i>
					<span class="theme_text">账号户名</span>
				</div>
				<div class="input_wrap">
					<div class="border"></div>
					<input type="text" name="huming" id="" value="" placeholder="请输入账号户名" datatype="*" nullmsg="请输入账号户名!"/>
				</div>
			</div>
			<div class="form_cell clearfix">
				<div class="left">
					<i class="iconfont icon-kehudianhua"></i>
					<span class="theme_text">手机号</span>
				</div>
				<span class="right theme_text">发送验证码</span>
				<div class="input_wrap" style="width:47%;float: left;">
					<div class="border"></div>
					<input type="number" name="phone" id="" value="" placeholder="请输入手机号" datatype="phone" nullmsg="请输入手机号!" />
				</div>
			</div>
			<div class="form_cell clearfix">
				<div class="left">
					<i class="iconfont icon-anquan2"></i>
					<span class="theme_text">验证码</span>
				</div>
				<div class="input_wrap">
					<div class="border"></div>
					<input type="number" name="" id="" value="" placeholder="请输入验证码" datatype="n1-6" nullmsg="请输入验证码!"/>
				</div>
			</div>
			<input type="submit" value="确认" class="confirm" />
		</form>
		<div class="alertMsg">
    		<span></span>
   		</div>
	</body>
	<script src="__ROOT__/public/webapp/js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="__ROOT__/public/webapp/js/Validform_v5.3.2_min.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		//		message验证
        var toggleAlert=function(msg){
            $(".alertMsg").addClass("on").find("span").html(msg);
            setTimeout(function(){
                $(".alertMsg").removeClass("on");
            },2000);
        };
		$.Tipmsg.r=null;
        var showmsg=function(msg){
            toggleAlert(msg);
        };
		$("#daiyan").Validform({
			datatype:{
				"phone":function(gets,obj,curform,regxp){
					/*参数gets是获取到的表单元素值，
					  obj为当前表单元素，
					  curform为当前验证的表单，
					  regxp为内置的一些正则表达式的引用。*/
	
					var reg1=/^1(3|4|5|7|8)[0-9]\d{8}$/,
                        reg2=/^1(3|4|5|7|8)[0-9]\d{8}$/,
                        mobile=curform.find(".mobile");
					
					if(reg1.test(mobile.val())){return true;}
					if(reg2.test(gets)){return true;}
					
					return false;
				}
			},
			ajaxPost:false,
            tiptype:function(msg){
					showmsg(msg);
				},
				tipSweep:true,
				
		});

		$('.color span').on('click', function(){
			$(this).siblings().removeClass('cur_color');
			$(this).addClass('cur_color');
			console.log($(this).index());
		});
	</script>
</html>